<template>
  <div id="storelist">
    <!-- 面包屑区域 -->
    <el-card class="box-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a href="/">一级菜单</a></el-breadcrumb-item>
        <el-breadcrumb-item>二级菜单</el-breadcrumb-item>
        <el-breadcrumb-item>三级菜单</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="box-card">
      <br />
      <el-form ref="form" label-width="80px" :model="form">
        <el-row :gutter="9">
          <el-col :span="8" class="shopcol">
            <el-form-item label="素材名称:" prop="materialname">
              <el-input v-model="form.materialname" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="shopcol">
            <el-form-item label="素材类型:" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择"
                style="width: 100%;"
                @change="btn"
              >
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="deladd">重置</el-button>
          </el-col>
          <el-col :span="2">
            <el-dropdown>
              <span class="el-dropdown-link" style="margin-left: 10px;">
                展开<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">黄金糕</el-dropdown-item>
                <el-dropdown-item command="b">狮子头</el-dropdown-item>
                <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-button type="primary" @click="editstore">上传</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <template>
        <br />
        <el-table :data="list" style="width: 100%;" class="table">
          <el-table-column type="selection" width="80" fixed />
          <el-table-column prop="materialname" label="素材名" width="200" />
          <el-table-column label="缩略图" width="200">
            <template v-slot="{ row }">
              <img
                :src="row.minipicture"
                alt=""
                style="border-radius: 50%; width: 60px; height: 70px;"
              />
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" width="200" />
          <el-table-column prop="price" label="价格" width="200" />
          <el-table-column prop="Uploaddate" label="上传日期" width="200" />
          <el-table-column
            prop="date"
            label="确认退款率"
            width="350"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button type="text" size="small" @click="opendell(row.id)"
                >删除</el-button
              >
              <el-button type="text" size="small" @click="editstore(row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-row :gutter="20">
        <el-col :span="14">
          <span>
            共{{ total }}条记录 第{{ this.page.page }}/{{
              Math.ceil(total / this.page.size)
            }}页
          </span>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-light">
            <el-pagination
              background
              :current-page="page.page"
              :page-size="page.size"
              layout="prev,pager, next,sizes, jumper"
              :page-sizes="[5, 10, 15, 20]"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="changePage"
            />
          </div>
        </el-col>
      </el-row>
    </el-card>

    <div>
      <template>
        <el-dialog
          :title="currentData.id ? '编辑' : '上传'"
          :visible="dialogVisible"
          @close="showding"
          width="60%"
        >
          <el-form res="formdata" :model="formdata">
            <el-row :gutter="20">
              <el-col :span="6" class="shopcol">
                <el-form-item label="店铺名:" prop="materialname">
                  <el-input
                    v-model="formdata.materialname"
                    placeholder="请输入"
                    style="margin-left: 30px;"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6" class="shopcol">
                <el-form-item label="行业:" prop="type">
                  <el-select
                    v-model="formdata.type"
                    placeholder="请选择"
                    style="width: 100%;"
                    @change="btn"
                  >
                    <el-option
                      v-for="(item, index) in options"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" class="shopcol">
                <el-form-item label="价格:" prop="price">
                  <el-input v-model="formdata.price" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form :gutter="20">
            <el-col style="margin-left: 380px;">
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
              </el-upload>
            </el-col>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showding">取 消</el-button>
            <el-button type="primary" @click="addoffical">确 定</el-button>
          </span>
        </el-dialog>
      </template>
      <!-- ### -->
    </div>
  </div>
</template>

<script>
import {
  getOfficalList,
  addOffical,
  delOffical,
  editOffical,
  iqeOffical,
  getType
} from '../../api/offical'
export default {
  name: 'Offical',

  data() {
    return {
      dialogVisible: false, // 新增页显示与隐藏
      // 新增
      options: [],
      formdata: {},
      form: {
        materialname: '',
        type: ''
      },
      list: [],
      total: 0,
      page: {
        page: 1, // 当前页码
        size: 5 // 总数
      },
      currentData: {}, // 点击当前行存储当前行的数据
      idname: '上传'
    }
  },
  created() {
    this.getOfficalList()
    this.getType()
  },
  methods: {
    // 渲染列表
    async getOfficalList() {
      const res = await getOfficalList(this.page)
      this.list = res.data
      this.total = res.headers['x-total-count'] - 0
    },

    btn() {
      this.options = []
      console.log(this.options)
      this.getType()
    },

    // 获取行业
    async getType() {
      const { data } = await getType()
      data.forEach((item) => {
        this.options.push({ label: item.type })
      })
    },

    // 重置
    deladd() {
      this.form = {
        materialname: '',
        type: ''
      }
    },

    // 查询
    async onSubmit() {
      if (this.form.materialname) {
        const { data } = await iqeOffical({
          materialname: this.form.materialname
        })
        this.list = data
      } else if (this.form.type) {
        const { data } = await iqeOffical({ type: this.form.type })
        this.list = data
      } else {
        this.getOfficalList()
      }
    },

    // 重置表单
    reset() {
      this.form = {
        shopname: '', // 店铺名称
        industry: '' // 所属行业
      }
    },

    // 删除
    async opendell(id) {
      try {
        await this.$confirm('确定要删除员工吗？')
        await delOffical(id)
        await this.getOfficalList()
        this.$message.success('删除员工成功')
      } catch (error) {
        console.log(error)
      }
    },

    // 点击确定
    async addoffical() {
      try {
        if (this.currentData.id) {
          await editOffical({ ...this.formdata, id: this.currentData.id })
        } else {
          await addOffical(this.formdata)
        }
        this.getOfficalList()
        this.$message.success('操作成功！')
        this.currentData = {}
        this.dialogVisible = false
      } catch (error) {
        console.log(error)
      }
    },

    // 编辑
    editstore(data) {
      this.dialogVisible = true
      if (data.id) {
        this.currentData = data
        this.formdata.materialname = data.materialname
        this.formdata.type = data.type
        this.formdata.price = data.price
      } else {
        this.formdata = {
          materialname: '',
          type: '',
          price: ''
        }
        console.log('1122')
      }
    },

    // 定义关闭弹窗

    // 分页跳转
    changePage(newPage) {
      this.page.page = newPage
      this.getOfficalList()
    },
    handleSizeChange(val) {
      this.page.size = val
      this.getOfficalList()
    },

    // 点击关闭
    // 定义关闭弹窗
    showding() {
      console.log('123')
      this.formdata = {}
      this.currentData = {}

      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less">
body {
  background-color: #f0f2f5;
  .box-card {
    margin: 20px;
    color: #8d8d8d;
  }
  .shopbox {
    color: #000;
    font-size: 20px;
    font-weight: 400;
  }
  .shopcol {
    margin-left: 40px;
  }
  .btnq {
    margin-left: 20px;
    width: 80px;
  }
  .btn {
    width: 80px;
  }
  .el-col el-col-4 {
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .touxian {
    height: 100px;
    width: 100px;
    background-color: #000;
  }
  .file {
    height: 100px;
    width: 100px;
    border: 1pxsolid;
  }
  .el-dropdown {
    margin-top: 10px;
  }
}
</style>
